<template>
  <div>
    <div
      v-for="(item, index) in propObj.dataList"
      :key="index"
      class="rankType3-listItem"
    >
      <div class="rankType3-top">
        <span class="rankType3No">{{ index + 1 }}</span>
        <span class="rankType-title">{{ item[propObj.titleKey] }}</span>
        <span class="line"></span>
        <span class="rankType-value">{{ ("" + item[propObj.tailKey]) | division }}</span>
      </div>
      <div class="progress progressType3">
        <div class="progress-bg">
          <div
            class="percent"
            :style="{
              width: (item[propObj.tailKey] / propObj.maxVal) * 100 + '%',
            }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { division } from '../util';
export default {
  props: {
    propObj: {
      type: Object,
      default: () => {},
    },
  },
  filters: {
    division,
  },
};
</script>
<style src='../index.css' scoped></style>